﻿<template>
  <!--<div class="loading_wrapper">-->
    <transition name="fade">
      <div class="loading_mask" ref="loading_mask_id"  v-show="loading_mask_flag" style="position: fixed;width: 100%;height: 100%;z-index:5000;background-color: #fff;top:0;">
        <img src="../../../static/img/app_icon.png" style="position: absolute;left:50%;top:26%;transform: translate(-50%,-50%);width:20vw;box-shadow: rgba(42, 42, 42, 0.51) 0px 0px 6vw 1vw;border-radius: 4vw;;"/>
      </div>
    </transition>
  <!--</div>-->

</template>

<script>

  export default {
    name: 'wx_share_temp',
    data () {
      return {
        mes:"",
        share_mask_show:false,
        raf:""
      }
    },
    props:["loading_mask_flag"],
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
    },
    watch: {
      loading_mask_flag() {
        let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
        if(this.loading_mask_flag === false){
            cancelAnimationFrame(this.raf);
        }
      },
    },
    components: {

    },
    mounted: function () {
     let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

      let load = this.$refs.loading_mask_id;
      this.raf = requestAnimationFrame(fn);
      let num=1,c=1;
      let _this = this;
      function fn() {
        num++;
        c+=2;
        load.style.backgroundColor = "hsl("+num+",50%,60%)";
        setTimeout(()=>{
          _this.raf = requestAnimationFrame(fn);
        },20);
        if(num >= 240) {
          num=0;
        }
      }
    },
  }
</script>

<style scoped lang="scss">
 @import "../../../static/sass/ani.scss";
</style>
